<template>
  <div class="box">
    <p>World</p>

    <el-button loading>按钮</el-button>

    <!-- 
      修改子组件样式的方式：
        1. 去查找人家组件的文档，看看有没有什么相关的 prop 可以控制
        2. 审查元素，找到人家的样式，然后写样式覆盖人家的样式

     -->
    <el-button size="large" color="red">按钮</el-button>

    <el-button class="green" size="small">按钮</el-button>
  </div>
</template>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: green;
}

/* .el-button:nth-child(3) {
  color: green;
} */

.green {
  color: green;
}

:deep(.el-icon) {
  color: pink;
}
</style>
